<style>
    .navigation { margin-left: 0px; height: 80%; }
    .navigation div { padding-left: 1px; }
    .navigation div ul { overflow: hidden; display: none; height: auto; margin: 0; margin-left: -.8rem; }
    .navigation span { display: block; line-height: 25px; padding: .5rem .5rem; cursor: pointer; }
    .navigation span:hover { background-color: rgba(0, 0, 0, 0.03); }
    .navigation a { color: #333; text-decoration: none; }
    .navigation a:hover { color: #06F; }

</style>

<!--sidebar-->
<nav class="navbar-default navbar-static-side" role="navigation">
    <div class="nav-close"><i class="fa fa-times-circle"></i>
    </div>
    <div class="sidebar-collapse">
        <ul class="nav" id="side-menu">
            <li class="nav-header">
                <div class="dropdown profile-element">
                    <span>
                        <img alt="image" class="img-circle" width="64" height="64" data-th-src="@{/asserts/img/boy.gif}" />
                    </span>
                    <span>
                        <img alt="image" class="img-circle" width="64px" height="64px"
                             th:if = "${avatar != null}"
                             data-th-src="@{/asserts/img/boy.gif}"/>
                        <img alt="image" class="img-circle" width="64px" height="64px"
                             th:unless = "${avatar == null}"
                             data-th-src="@{'/kaptcha/'+${avatar}}" />
                        <!--"@{'/details/'+${user.login}(orderId=${o.id})}"-->
                    </span>
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                        <span class="block m-t-xs">
                            <div class="font-bold" data-th-utext="${user.name}"></div>
                        </span>
                        <span class="text-muted text-xs">
                            超级管理员
                            <!--<span class="text-muted text-xs block">${shiro.getUser().roleNames[0]}<b class="caret"></b></span>-->
                            <b class="caret"></b>
                        </span>
                    </a>
                    <ul class="dropdown-menu animated fadeInRight m-t-xs">
                        <li>
                            <a class="J_menuItem" href="form_avatar.html">修改头像</a>
                        </li>
                        <li>
                            <a class="J_menuItem" href="profile.html">个人资料</a>
                        </li>
                        <li>
                            <a class="J_menuItem" href="contacts.html">联系我们</a>
                        </li>
                        <li>
                            <a class="J_menuItem" href="mailbox.html">信箱</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a data-th-href="@{/sys/logout}">安全退出</a>
                        </li>
                    </ul>
                </div>
                <div class="logo-element">H+
                </div>
            </li>
            <li data-th-each="menu : ${menus}">
                <a href="#">
                    <i data-th-class="${menu.icon}"></i>
                    <span class="nav-label" data-th-text="${menu.name}"></span>
                    <span class="fa arrow" th:if="${#lists.size(menu.list) gt 0 and !#lists.isEmpty(menu.list)}"></span>
                </a>
                <ul class="nav nav-second-level" th:if="${#lists.size(menu.list) gt 0}">
                    <li data-th-each="children,iterStat:${menu.list}">
                        <a class="J_menuItem" data-th-utext="${children.name}" data-th-href="${children.url}">
                            <i data-th-class="${children.icon}"></i>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</nav>